<template>
    <div class="page">
        <z-paging
            ref="paging"
            v-model="packageList"
            :default-page-size="10"
            :show-scrollbar="false"
            :paging-style="{ minHeight: '100vh', backgroundColor: '#F5F6F7' }"
            :refresher-enabled="true"
            :loading-more-enabled="true"
            height="100vh"
            @query="queryList"
        >
            <template #top>
                <u-navbar
                    title="商品列表"
                    :autoBack="true"
                    bgColor="#fff"
                    left-icon-color="#606266"
                    :titleStyle="{color: '#000'}"
                />
                <view class="page-search">
                    <view class="search-input">
                        <input
                            v-model="searchParams.ProductName"
                            type="text"
                            placeholder="请输入商品名称"
							placeholder-style="color: #999"
							@confirm="queryList"
                        />
                    </view>
                    <view class="search-icon">
                        <uni-icons type="search" size="24" @click="queryList"></uni-icons>
                    </view>
                </view>
            </template>
            <view class="page-list">
                <view
                    v-for="(item, index) in packageList"
                    :key="index"
                    class="item"
                    @click="onJumpDetail(item.Id)"
                >
                    <view class="item-l">
                        <image :src="item.Img" mode="aspectFill" class="img" />
                    </view>
                    <view class="item-r">
                        <view class="item-name">{{ item.Name }}</view>
                        <view class="item-price">{{ $t('orders.actualPaymentUnit') }} {{ item.ShowPrice }}</view>
                    </view>
                </view>
            </view>
        </z-paging>
    </div>
</template>

<script>
import { getGoodsList } from '@/api/mall.js'

export default {
    name: 'ShopItemList',
    data() {
        return {
            itemId: 906,
            packageList: [],
            searchParams: {
                ProductName: ''
            },
        }
    },
    onLoad(options) {
        this.itemId = options.id;
    },
    methods: {
        async queryList(pageNo, pageSize) {
            uni.showLoading({
                title: '加载中...',
                mask: true
            })
            const { Data } = await getGoodsList({
                BusinessId: this.itemId,
                Index: pageNo,
                Size: pageSize,
                ...this.searchParams
            });
            uni.hideLoading();
            // 筛选出套餐 type 17
            const packageList = Data.filter(item => item.Type === 17);
            this.$refs.paging.complete(packageList || []);
        },
        onJumpDetail(id) {
            const url = `/mall_subpages/goods/index?id=${id}&type=17`;
            uni.navigateTo({ url });
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    position: relative;
    min-height: 100vh;
    &-search {
        display: flex;
        height: 80rpx;
        align-items: center;
        background: #fff;
        margin-top: 176rpx;
        padding: 0 24rpx;
        .search-input {
            flex: 1;
            input {
				border: none;
				outline: none;
				background: transparent;
				font-size: 28rpx;
				color: #333;
				padding: 0 20rpx;
				height: 100%;
				background-color: #eee;
				border-radius: 40rpx;
            }
        }
        .search-icon {
            margin-left: 24rpx;
            cursor: pointer;
        }
    }
    &-list {
        padding: 24rpx;
        .item {
            background-color: #fff;
            display: flex;
            padding: 24rpx;
            border-radius: 16rpx;
            &-l {
                width: 140rpx;
                height: 140rpx;
                .img {
                    width: 100%;
                    height: 100%;
                    border-radius: 12rpx;
                    transition: transform 0.3s ease;
                    &:active {
                        transform: scale(1.05);
                    }
                }
            }
            &-r {
                flex: 1;
                margin-left: 24rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .item-name {
                    font-size: $uni-font-size-base;
                }
                .item-price {
                    color: #fa452d;
                    font-size: $uni-font-size-lg;
                }
            }
        }
    }
}
</style>